<template>
  <div>
    <div class="volunteerForm">
      <i-form ref="formbox" :model="formInline" :rules="ruleInline" inline>
        <div class="volunteerForm_item cf">
          <div class="form_title">志愿者类型</div>
          <div class="form_box">
            <Form-item prop="zy_type">
              <i-select v-model="formInline.zy_type" placeholder="请选择">
                <i-option :value="v" v-for="(v,i) in userTypeList" :key="i">{{v}}</i-option>
              </i-select>
            </Form-item>
          </div>
        </div>
        <div class="volunteerForm_item cf">
          <div class="form_title">出发地</div>
          <div class="form_box">
            <Form-item prop="address">
              <i-select v-model="formInline.address" placeholder="请选择">
                <i-option :value="v.name" v-for="(v,i) in departure" :key="i">{{v.name}}</i-option>
              </i-select>
            </Form-item>
          </div>
        </div>
        <div class="volunteerForm_item cf">
          <div class="form_title">姓名</div>
          <div class="form_box">
            <Form-item prop="name">
              <i-input type="text" class="form_control" v-model="formInline.name"></i-input>
            </Form-item>
          </div>
        </div>
        <div class="volunteerForm_item cf">
          <div class="form_title">电话</div>
          <div class="form_box">
            <Form-item prop="phone">
              <i-input type="text" class="form_control" v-model="formInline.phone"></i-input>
            </Form-item>
          </div>
        </div>
        <div class="volunteerForm_item cf">
          <div class="form_title">身份证号</div>
          <div class="form_box">
            <Form-item prop="idcard">
              <i-input type="text" class="form_control" v-model="formInline.idcard"></i-input>
            </Form-item>
          </div>
        </div>
        <div class="volunteerForm_item cf">
          <div class="form_title">职业</div>
          <div class="form_box">
            <Form-item prop="job">
              <i-input type="text" class="form_control" v-model="formInline.job"></i-input>
            </Form-item>
          </div>
        </div>
        <div class="volunteerForm_item cf">
          <div class="form_title">工作单位</div>
          <div class="form_box">
            <Form-item prop="workunit">
              <i-input type="text" class="form_control" v-model="formInline.workunit"></i-input>
            </Form-item>
          </div>
        </div>
        <div class="volunteerForm_item cf">
          <div class="form_title">技能</div>
          <div class="form_box">
            <Form-item prop="skill">
              <i-input type="text" class="form_control" v-model="formInline.skill"></i-input>
            </Form-item>
          </div>
        </div>
        <div class="volunteerForm_item cf idCardUpload">
          <div class="form_title">身份证</div>
          <div class="form_box">
            <div class="idCardUpladBtn" @click="uploadHeadImg(1)" v-if="!formInline.card_front">
              <div class="p1">点击上传</div>
              <div class="p2">正面</div>
            </div>
            <div
              class="idCardUpladBtn"
              @click="uploadHeadImg(1)"
              :class="{set:formInline.card_front}"
              v-if="formInline.card_front"
            >
              <img :src="formInline.card_front" alt />
            </div>
            <div class="idCardUpladBtn" @click="uploadHeadImg(0)" v-if="!formInline.card_back">
              <div class="p1">点击上传</div>
              <div class="p2">反面</div>
            </div>
            <div
              class="idCardUpladBtn"
              @click="uploadHeadImg(0)"
              :class="{set:formInline.card_back}"
              v-if="formInline.card_back"
            >
              <img :src="formInline.card_back" alt />
            </div>
          </div>
        </div>
      </i-form>

      <div class="volunteerForm_bot">
        <div class="volunteerForm_item cf">
          <div class="form_title"></div>
          <div class="form_box volunteerAgreements">
            <div class="agreement_check_box">
              <input type="checkbox" v-model="hasRead" />
              <span @click="goTicketAgreement" :class="hasRead?'':'c-red'">同意该《隐私保密协议》</span>
            </div>
          </div>
        </div>
        <a href="javascript:void(0);" @click="goVolunteerPoster" class="btn_assit btn_set">
          <p>提交</p>
          <p>制作我的志愿者海报</p>
        </a>
      </div>
    </div>
    <div class="companyMessage">
      <div class="companyMessage_title">关注我们：</div>
      <ul>
        <li :class="wxCodeIndex == 1 ? 'active':''" @click="showWxCodeImg(1)">
          <span>活动官方公众号</span>
          <div class="wx-code-img" :class="wxCodeIndex == 1 ? 'active':''">
            <img src="../assets/images/wx-code02.jpg" alt />
          </div>
        </li>
        <li :class="wxCodeIndex == 2 ? 'active':''" @click="showWxCodeImg(2)">
          <span>凯翼汽车</span>
          <div class="wx-code-img" :class="wxCodeIndex == 2 ? 'active':''">
            <img src="../assets/images/wx-code03.jpg" alt />
          </div>
        </li>
        <li :class="wxCodeIndex == 3 ? 'active':''" @click="showWxCodeImg(3)">
          <span>中国劳动保障报</span>
          <div class="wx-code-img" :class="wxCodeIndex == 3 ? 'active':''">
            <img src="../assets/images/wx-code04.jpg" alt />
          </div>
        </li>
        <li :class="wxCodeIndex == 4 ? 'active':''" @click="showWxCodeImg(4)">
          <span>公益时报</span>
          <div class="wx-code-img" :class="wxCodeIndex == 4 ? 'active':''">
            <img src="../assets/images/wx-code01.jpg" alt />
          </div>
        </li>
      </ul>
    </div>

    <!--<div class="baomixieyi">-->
    <!--<ConfidentialityAgreement></ConfidentialityAgreement>-->
    <!--</div>-->
  </div>
</template>
<script>
import { mapActions } from "vuex";

var wx = require("weixin-js-sdk");
import config from "@/config";
import axios from "axios";
import ConfidentialityAgreement from "@/components/ConfidentialityAgreement"; //保密协议
export default {
  data() {
    return {
      wxCodeIndex: 0,
      hasRead: false,
      userTypeList: ["随车志愿者", "站台志愿者"],
      formInline: {
        zy_type: "",
        name: "",
        address: "",
        idcard: "",
        job: "",
        workunit: "",
        skill: "",
        phone: "",
        configUrl: config.baseUrl,
        card_front: "",
        card_back: ""
      },
      ruleInline: {
        zy_type: [
          {
            required: true,
            message: "",
            trigger: "change"
          }
        ],
        name: [
          {
            required: true,
            message: "",
            trigger: "blur"
          }
        ],
        address: [
          {
            required: true,
            message: "",
            trigger: "change"
          }
        ],
        phone: [
          {
            required: true,
            message: "",
            trigger: "blur"
          },
          {
            type: "string",
            pattern: /^1[3456789]\d{9}$/
          }
        ],
        idcard: [
          {
            required: true,
            message: "",
            trigger: "blur"
          },
          {
            type: "string",
            pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
          }
        ],
        job: [
          {
            required: true,
            message: "",
            trigger: "blur"
          }
        ],
        workunit: [
          {
            required: true,
            message: "",
            trigger: "blur"
          }
        ],
        skill: [
          {
            required: true,
            message: "",
            trigger: "blur"
          }
        ]
      },
      departure: [
        {
          name: "北京"
        },
        {
          name: "上海"
        },
        {
          name: "福州"
        },
        {
          name: "南京"
        },
        {
          name: "常州"
        },
        {
          name: "苏州"
        },
        {
          name: "无锡"
        },
        {
          name: "南昌"
        }
      ],
      card_front: "",
      card_back: "",
      uplaod_front: "",
      upload_back: "",
      carReg: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
      carInfo: null
    };
  },
  components: {
    ConfidentialityAgreement
  },

  created() {
    this.setLocal();
    let myherf = /(Android)/i.test(navigator.userAgent)
      ? location.href.split("#")[0]
      : window.entryUrl;
    this.getShareInfo({
      url: myherf,
      callback: res => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: [
            "chooseImage",
            "previewImage",
            "uploadImage",
            "downloadImage",
            "getLocalImgData"
          ]
        });
      }
    });
  },
  methods: {
    ...mapActions({
      saveVolunteerInfo: "fishH5/saveVolunteerInfo",
      getShareInfo: "fishH5/getShareInfo",
      uploadUserIdcard: "fishH5/uploadUserIdcard"
    }),
    setLocal() {
      const ticketAgreement = localStorage.getItem("ticketAgreement");
      const ticketAgreementcarInfo = localStorage.getItem(
        "ticketAgreementcarInfo"
      );
      if (ticketAgreement) {
        this.formInline = JSON.parse(ticketAgreement);
      }
      if (ticketAgreementcarInfo) {
        this.carInfo = JSON.parse(ticketAgreementcarInfo);
      }
    },
    showWxCodeImg(num) {
      if (num == this.wxCodeIndex) {
        this.wxCodeIndex = 0;
        return false;
      }
      this.wxCodeIndex = num;
    },
    goTicketAgreement() {
      localStorage.setItem("ticketAgreement", JSON.stringify(this.formInline));
      localStorage.setItem(
        "ticketAgreementcarInfo",
        JSON.stringify(this.carInfo)
      );
      this.$router.replace({
        path: "/ticketAgreement"
      });
    },
    uploadHeadImg(type) {
      let that = this;
      if (!this.formInline.name) {
        that.$Message.error("请输入姓名");
        return;
      }
      if (!this.carReg.test(this.formInline.idcard)) {
        that.$Message.error("请输入正确的身份证号码");
        return;
      }
      wx.ready(() => {
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            that.uploadImage(res.localIds[0], type);
            //that.getLocalImgData(res.localIds[0], type)
          }
        });
      });
    },
    uploadImage(localId, type) {
      const that = this;
      wx.uploadImage({
        localId: localId,
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: async res => {
          const serverId = res.serverId; // 返回图片的服务器端ID
          let mytype = "back";
          if (type) {
            mytype = "front";
          }
          const result = await that.upLoadCard(serverId, mytype);
          if (type) {
            if (result && result.data.code > 0) {
              const data = result.data.data;
              if (data.name && that.carReg.test(data.code)) {
                that.carInfo = data;
                that.formInline.idcard = that.carInfo.code;
                that.formInline.name = that.carInfo.name;
                that.formInline.card_front = that.carInfo.imgurl;
              } else {
                that.$Message.error("未能正确识别身份证正面，请重新上传");
              }
            } else {
              that.$Message.error("未能正确识别身份证正面，请重新上传");
            }
          } else {
            if (result && result.data.code > 0) {
              const data = result.data.data;
              that.formInline.card_back = data.imgurl;
            } else {
              that.$Message.error("未能正确识别身份证反面，请重新上传");
            }
          }
        }
      });
    },
    upLoadCard(media_id, type = "front") {
      return axios.post("api/ticket/checkCardOcr", {
        act: "zy",
        media_id,
        type
      });
    },
    /**
     * 保存志愿者信息
     */
    goVolunteerPoster() {
      this.$refs["formbox"].validate(valid => {
        if (valid) {
          if (!this.formInline.card_back || !this.formInline.card_front) {
            this.$Message.error("未上传身份证");
            return;
          }
          if (!this.hasRead) {
            this.$Message.error("您未同意同意该《隐私保密协议》，无法提交");
            return;
          }
          let data = this.formInline;
          data.callback = () => {
            this.$router.replace({
              name: "assitorForm",
              query: {
                type: "volunteer"
              }
            });
          };
          this.saveVolunteerInfo(data);
        } else {
        }
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      const val = window.sessionStorage.getItem("hasRead");
      if (val && Number(val) === 1) {
        this.hasRead = true;
      } else {
        this.hasRead = false;
      }
    });
  }
};
</script>
<style scoped>
.companyMessage li {
  height: auto;
}

.companyMessage li.active {
  background: url(~@/assets/images/jian.png) no-repeat 5.62rem 0.17rem/0.26rem
    0.26rem;
}

.wx-code-img {
  width: 2.54rem;
  height: 2.54rem;
  margin: 0.2rem auto;
  overflow: hidden;
  display: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.wx-code-img img {
  display: block;
  max-width: 100%;
  min-height: 100%;
}

.wx-code-img.active {
  display: block;
}

.agreement_check_box {
  color: #0036ff;
  vertical-align: middle;
  text-align: left;
}

.agreement_check_box > input {
  vertical-align: middle;
}

.agreement_check_box > span {
  /* text-decoration: underline; */
  display: inline-block;
  line-height: 1.6em;
  border-bottom: 1px solid #0036ff;
  vertical-align: middle;
}

.volunteerForm {
  padding: 0 0.68rem;
  padding-top: 0.42rem;
  padding-bottom: 1.31rem;
  background: url(~@/assets/images/volunteerBg.png) no-repeat 0 7.56rem/7.5rem
      2.96rem,
    url(~@/assets/images/cloud01.png) no-repeat 3.92rem 0.96rem/3.58rem 1.45rem;
}

.volunteerForm .ivu-select-selection {
  height: 0.53rem !important;
  font-size: 0.22rem;
  line-height: 0.53rem;
}

.volunteerForm .ivu-form-item {
  margin-bottom: 0;
}

.volunteerForm_item {
  width: 6.14rem;
  padding: 0.12rem 0;
}

.volunteerForm_item .form_title {
  /*width: 1.77rem;*/
  width: 1.8rem;
  text-align: justify;
  text-align-last: justify;
  font-size: 0.32rem;
  line-height: 0.53rem;
  height: 0.53rem;
  float: left;
  padding-right: 0.15rem;
}

.volunteerForm_item .form_box {
  /*width: 4.27rem;*/
  width: 4.24rem;
  height: 0.53rem;
  float: left;
}

.volunteerForm_item .form_box > .form_control {
  height: 0.53rem;
  display: block;
  border-radius: 0.1rem;
  -webkit-border-radius: 0.1rem;
  border: 1px solid #a0a0a0;
  width: 100%;
  padding: 0 10px;
  font-size: 0.22rem;
  background-color: #fff;
}

.idCardUpload .idCardUpladBtn {
  display: inline-block;
  width: 2.06rem;
  height: 1.36rem;
  border: 1px solid #959595;
  border-radius: 0.1rem;
  background-color: #fef7f2;
  text-align: center;
  padding-top: 0.34rem;
  vertical-align: top;
}

.idCardUpload .idCardUpladBtn img {
  width: 100%;
  height: 100%;
}

.idCardUpload .idCardUpladBtn.set {
  padding-top: 0;
  overflow: hidden;
}

.idCardUpload .idCardUpladBtn .p1 {
  font-size: 0.18rem;
  color: #727171;
  line-height: 0.18rem;
}

.idCardUpload .idCardUpladBtn .p2 {
  font-size: 0.32rem;
  color: #727171;
  line-height: 0.32rem;
  margin-top: 0.12rem;
}

.idCardUpload .form_box {
  height: auto;
}

.idCardUpload .form_title {
  margin-top: 0.41rem;
}

.volunteerAgreements {
  font-size: 0.18rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}

.volunteerForm_bot {
  margin-top: 2.4rem;
}

.baomixieyi {
  /* position: ab; */
}

/* 定义keyframe动画，命名为blink */
@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 添加兼容性前缀 */
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-ms-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 定义blink类*/
.blink {
  color: #0574dd;
  animation: blink 1s linear infinite;
  /* 其它浏览器兼容性前缀 */
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  -ms-animation: blink 1s linear infinite;
  -o-animation: blink 1s linear infinite;
}

.c-red {
  color: red;
}
.btn_assit{
  margin-top: 0.1rem;
}
</style>
